<template>
  <v-card>
    <v-row>
      <v-col style="padding:0 2px 5px 12px" cols="3">
        <VZPanel title="问题关闭率" simple iconText="mdi-finance" rounded="md">
          <VDCountUp :endVal="closeRate" height="auto" color="#3C634E" suffix="%" decimalPlaces=2
                     @click="toProblem"></VDCountUp>
        </VZPanel>
      </v-col>
      <v-col style="padding:0 2px 5px 2px" cols="2">
        <VZPanel title="问题超期率" simple iconText="mdi-finance" rounded="md">
          <VDCountUp :endVal="warningRate" height="auto" :color="warn_color" suffix="%" decimalPlaces=2></VDCountUp>
        </VZPanel>
      </v-col>
      <v-col style="padding:0 2px 5px 2px" cols="2">
        <VZPanel title="问题总数" simple iconText="mdi-finance" rounded="md">
          <VDCountUp :endVal="problemCountNum" height="auto" color="#3C634E" @click="toProblem"></VDCountUp>
        </VZPanel>
      </v-col>
      <v-col style="padding:0 2px 5px 2px" cols="2">
        <VZPanel title="待办任务数" simple iconText="mdi-account-multiple-check" rounded="md">
          <VDCountUp :endVal="waitToDoneNum" height="auto" color="#3C634E" @click="toTask"></VDCountUp>
        </VZPanel>
      </v-col>
      <v-col style="padding:0 12px 5px 2px" cols="3">
        <VZPanel title="事件待审批数" simple iconText="mdi-account-multiple-check" rounded="md">
          <VDCountUp :endVal="eventAuditNum" height="auto" color="#3C634E" @click="toEventAudit"></VDCountUp>
        </VZPanel>
      </v-col>
    </v-row>
    <v-row style="padding-left:20px">
      <v-col style="padding:0" cols="6">
        <!-- <v-btn class="ma-1" outlined color="#8D9957" @click="loadProblemNumType('VALUE_POINT','【阈点】')">
          <v-icon v-if="selectType == 'VALUE_POINT'">mdi-check-circle</v-icon>
          阀点统计
        </v-btn> -->
        <v-btn class="ma-1" outlined color="#8D9957" @click="loadProblemNumType('DEPARTMENT','【部门】')">
          <v-icon v-if="selectType == 'DEPARTMENT'">mdi-check-circle</v-icon>
          部门统计
        </v-btn>
        <v-btn class="ma-1" outlined color="#8D9957" @click="loadProblemNumType('MONTH','【年度】')">
          <v-icon v-if="selectType == 'MONTH'">mdi-check-circle</v-icon>
          年度统计
        </v-btn>
        <v-btn class="ma-1" outlined color="#8D9957" @click="loadProblemNumType('DAY','【月度】')">
          <v-icon v-if="selectType == 'DAY'">mdi-check-circle</v-icon>
          月度统计
        </v-btn>
        <v-btn class="ma-1" outlined color="#8D9957" @click="loadProblemNumType('PRODUCT','【产品】')">
          <v-icon v-if="selectType == 'PRODUCT'">mdi-check-circle</v-icon>
          产品统计
        </v-btn>
        <!--<v-btn class="ma-1" outlined color="#8D9957" @click="loadProblemNumType('SEVERITY','【严重度】')"><v-icon v-if="selectType == 'SEVERITY'">mdi-check-circle</v-icon>严重度统计</v-btn>-->
      </v-col>
      <v-col style="padding:0" cols="6">
        <v-row align="end" align-content="end" justify=end>
          <v-col v-if="selectType == 'MONTH'||selectType == 'DAY'" style="padding:12px 0 0 0" cols="2">
            <v-select class="ma-1" dense :items="years" label="年份" v-model="year"></v-select>
          </v-col>
          <v-col v-if="selectType == 'DAY'" style="padding:12px 0 0 0" cols="2">
            <v-select class="ma-1" dense :items="months" label="月份" v-model="month"></v-select>
          </v-col>
          <v-col v-if="selectType != 'MONTH' && selectType != 'DAY'" style="padding: 12px 0px 18px" cols="3">
            <VZDatePicker v-model="dates" label="时间范围" type="daterange" ></VZDatePicker>
          </v-col>
          <v-col v-if="selectType == 'PRODUCT'" style="padding:12px 0 0 3px" cols="4">
            <v-combobox dense v-model="plantCode" :items="plantItems" label="主机厂"  ></v-combobox>
          </v-col>
          <v-col cols="1" style="padding:0">
            <v-tooltip top>
              <template v-slot:activator="{ on, attrs }">
                <v-btn v-bind="attrs"
                       v-on="on" class="ma-1" icon color="white" @click="changeIfHidden">
                  <v-icon>mdi-cached</v-icon>
                </v-btn>
              </template>
              <span>switch</span>
            </v-tooltip>
          </v-col>
        </v-row>
      </v-col>



    </v-row>
    <v-row>
      <div ref="problemNumTarget" style="width:100%;height:35vh"></div>
    </v-row>
    <v-row>
      <v-col style="padding:1" span="4">
        <div ref="sourceTarget" style="width:98%;height:35vh"></div>
      </v-col>
      <v-col style="padding:1" span="4">
        <div ref="eventTarget" style="width:98%;height:35vh"></div>
      </v-col>
      <v-col style="padding:1" span="4">
        <div ref="problemTarget" style="width:98%;height:35vh"></div>
      </v-col>
    </v-row>
  </v-card>
</template>
<script>
export default {
  data() {
    return {
      valuePointSql: "select t.VALVE_POINT_TIME as name,SUM(CASE t.severity WHEN 'A' THEN num ELSE 0 END) AS a,SUM(CASE t.severity WHEN 'B' THEN num ELSE 0 END) AS b,SUM(CASE t.severity WHEN 'C' THEN num ELSE 0 END) AS c,SUM(CASE t.severity WHEN 'D' THEN num ELSE 0 END) AS d,CASE t.VALVE_POINT_TIME WHEN 'EOP' THEN 'G9' ELSE VALVE_POINT_TIME END AS sort from (select VALVE_POINT_TIME,QUALITY_PROBLEM_SEVERITY as severity,count(1) as num from tb_quality_problem where MARK_FOR_DELETE = 0 AND VALVE_POINT_TIME IS NOT NULL [and IF_HIDDEN = #{if_hidden}] [AND PROBLEM_HAPPEN_DATE <= #{etime}] [and PROBLEM_HAPPEN_DATE >= #{btime}]  group by VALVE_POINT_TIME,QUALITY_PROBLEM_SEVERITY) t group by t.VALVE_POINT_TIME order by sort",
      departmentSql: "select t.CHARGE_PERSON_DEPT as name,SUM(CASE t.severity WHEN 'A' THEN num ELSE 0 END) AS a,SUM(CASE t.severity WHEN 'B' THEN num ELSE 0 END) AS b,SUM(CASE t.severity WHEN 'C' THEN num ELSE 0 END) AS c,SUM(CASE t.severity WHEN 'D' THEN num ELSE 0 END) AS d from (select CHARGE_PERSON_DEPT,QUALITY_PROBLEM_SEVERITY as severity,count(1) as num from tb_quality_problem where MARK_FOR_DELETE = 0 and CHARGE_PERSON_DEPT is not null [and IF_HIDDEN = #{if_hidden}] [AND PROBLEM_HAPPEN_DATE <= #{etime}] [and PROBLEM_HAPPEN_DATE >= #{btime}] group by CHARGE_PERSON_DEPT,QUALITY_PROBLEM_SEVERITY) t group by t.CHARGE_PERSON_DEPT",
      monthSql: "select t.YEAR as name,SUM(CASE t.severity WHEN 'A' THEN num ELSE 0 END) AS a,SUM(CASE t.severity WHEN 'B' THEN num ELSE 0 END) AS b,SUM(CASE t.severity WHEN 'C' THEN num ELSE 0 END) AS c,SUM(CASE t.severity WHEN 'D' THEN num ELSE 0 END) AS d from (select LEFT(PROBLEM_HAPPEN_DATE,7) as YEAR,QUALITY_PROBLEM_SEVERITY as severity,count(1) as num from tb_quality_problem where MARK_FOR_DELETE = 0 [and IF_HIDDEN = #{if_hidden}] [and LEFT(PROBLEM_HAPPEN_DATE,4) = #{year_data}] group by LEFT(PROBLEM_HAPPEN_DATE,7),QUALITY_PROBLEM_SEVERITY) t group by t.YEAR order by t.YEAR",
      daySql: "select t.PROBLEM_HAPPEN_DATE as name,SUM(CASE t.severity WHEN 'A' THEN num ELSE 0 END) AS a,SUM(CASE t.severity WHEN 'B' THEN num ELSE 0 END) AS b,SUM(CASE t.severity WHEN 'C' THEN num ELSE 0 END) AS c,SUM(CASE t.severity WHEN 'D' THEN num ELSE 0 END) AS d from (select PROBLEM_HAPPEN_DATE,QUALITY_PROBLEM_SEVERITY as severity,count(1) as num from tb_quality_problem where MARK_FOR_DELETE = 0 [and IF_HIDDEN = #{if_hidden}] [and LEFT(PROBLEM_HAPPEN_DATE,7) = #{month_data}] group by PROBLEM_HAPPEN_DATE,QUALITY_PROBLEM_SEVERITY) t group by t.PROBLEM_HAPPEN_DATE order by t.PROBLEM_HAPPEN_DATE",
      productSql: "SELECT " +
          " t.PRODUCT_NAME AS NAME, " +
          " SUM( CASE t.severity WHEN 'A' THEN num ELSE 0 END ) AS a, " +
          " SUM( CASE t.severity WHEN 'B' THEN num ELSE 0 END ) AS b, " +
          " SUM( CASE t.severity WHEN 'C' THEN num ELSE 0 END ) AS c, " +
          " SUM( CASE t.severity WHEN 'D' THEN num ELSE 0 END ) AS d  " +
          "FROM " +
          " ( " +
          "   SELECT " +
          "    a.PRODUCT_NAME, " +
          "    a.QUALITY_PROBLEM_SEVERITY AS severity, " +
          "    count( 1 ) AS num  " +
          "   FROM " +
          "    tb_quality_problem a  " +
          "   LEFT JOIN (SELECT * FROM tb_standard_assembly_product GROUP BY ASSEMBLY_CODE) b ON a.PRODUCT_CODE = b.ASSEMBLY_CODE " +
          "   WHERE " +
          "   a.MARK_FOR_DELETE = 0 [and IF_HIDDEN = #{if_hidden}] [AND a.PROBLEM_HAPPEN_DATE <= #{etime}] [and a.PROBLEM_HAPPEN_DATE >= #{btime}] AND a.PRODUCT_NAME IS NOT NULL AND a.PRODUCT_NAME != '' [ and b.ENGINE_PLANT_CODE = #{engine_plant_code}] " +
          "   group by a.PRODUCT_CODE,a.QUALITY_PROBLEM_SEVERITY  " +
          " ) t group by t.PRODUCT_NAME;",
      /*severitySql:'select QUALITY_PROBLEM_SEVERITY as name,count(1) as num,(select count(1) as num from tb_quality_problem where MARK_FOR_DELETE = 0 [and IF_HIDDEN = #{if_hidden}]) as count_num  from tb_quality_problem where MARK_FOR_DELETE = 0 and QUALITY_PROBLEM_SEVERITY is not null [and if_hidden = #{if_hidden}] group by QUALITY_PROBLEM_SEVERITY order by QUALITY_PROBLEM_SEVERITY',*/
      nameList: [],
      numList: [],
      currentSql: "select t.VALVE_POINT_TIME as name,SUM(CASE t.severity WHEN 'A' THEN num ELSE 0 END) AS a,SUM(CASE t.severity WHEN 'B' THEN num ELSE 0 END) AS b,SUM(CASE t.severity WHEN 'C' THEN num ELSE 0 END) AS c,SUM(CASE t.severity WHEN 'D' THEN num ELSE 0 END) AS d,CASE t.VALVE_POINT_TIME WHEN 'EOP' THEN 'G9' ELSE VALVE_POINT_TIME END AS sort from (select VALVE_POINT_TIME,QUALITY_PROBLEM_SEVERITY as severity,count(1) as num from tb_quality_problem where MARK_FOR_DELETE = 0 AND VALVE_POINT_TIME IS NOT NULL [and IF_HIDDEN = #{if_hidden}] [AND PROBLEM_HAPPEN_DATE <= #{etime}] [and PROBLEM_HAPPEN_DATE >= #{btime}] group by VALVE_POINT_TIME,QUALITY_PROBLEM_SEVERITY) t group by t.VALVE_POINT_TIME order by sort",
      if_hidden: 'N',
      engine_plant_code: '',
      sourceRateData: [],
      eventRateData: [],
      problemRateData: [],
      problem_source: '',
      event_type: '',
      problem_source_name: '',
      event_type_name: '',
      showDataZoom: false,
      rotate: 0,
      problemCountNum: 0,
      closeRate: 0,
      warningRate: 0,
      waitToDoneNum: 0,
      eventAuditNum: 0,
      intervalId: null,
      selectType: 'MONTH', //VALUE_POINT
      problemNumTypeName: '【年度】',
      seriesList: [],
      years: [],
      year: new Date().getFullYear(),
      month: new Date().getMonth() + 1,
      months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      dates:['2024-01-01',new Date().getFullYear()+'-12-31'],
      plantItems:[],
      plantCode:'',
    }
  },
  methods: {
    toProblem() {
      this.$router.push({path:'/vpg/1b6b203e0f1646e1b42f0e9571ed78ec',params:{}})
      /*this.$emit('toPage', '1b6b203e0f1646e1b42f0e9571ed78ec', {});*/
    },
    toTask() {
      this.$router.push({path:'/vpg/e68652d593c5402894e82a9391090c25',params:{}})
      /*this.$emit('toPage', 'e68652d593c5402894e82a9391090c25', {});*/
    },
    toEventAudit() {
      this.$router.push({path:'/vpg/va568825cfd4bcc8826316c7395',params:{}})
      /*this.$emit('toPage', 'va568825cfd4bcc8826316c7395', {});*/
    },
    changeIfHidden() {
      if (this.if_hidden == 'N') {
        this.if_hidden = '';
      } else {
        this.if_hidden = 'N';
      }
      this.loadAllData();
    },
    runSource() {
      this.chartSource = this.chartSource || this.$echarts.init(this.$refs.sourceTarget)
      let option = {
        title: {
          text: 'HV内外部问题占比',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        /*legend: {
          top: '5%',
          left: 'center',
        },*/
        series: [
          {
            name: 'HV内外部问题占比',
            type: 'pie',
            radius: ['30%', '70%'],
            selectedMode: 'single',
            selectedOffset: 8,
            select: {
              labelLine: {},
              itemStyle: {}
            },
            top: '18',
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 8,
              borderColor: '#fff',
              borderWidth: 2
            },

            emphasis: {
              label: {
                show: true,
                fontSize: 16,
                fontWeight: 'bold'
              }
            },
            label: {
              show: true,
              formatter: '{b}:{c} {d}%',
            },
            labelLine: {
              show: true
            },
            data: this.sourceRateData
          }
        ]
      }
      let _this = this;
      option && this.chartSource.setOption(option);
      this.chartSource.on('click', function (params) {
        _this.problem_source = params.data.code;
        _this.problem_source_name = '【' + params.data.name + '】';
        _this.loadEventData();
        _this.loadProblemData();
      });
    },
    runEvent() {
      this.chartEvent = this.chartEvent || this.$echarts.init(this.$refs.eventTarget)
      let option = {
        title: {
          text: this.problem_source_name + '事件占比',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        /*legend: {
          top: '5%',
          left: 'center',
        },*/
        series: [
          {
            name: this.problem_source_name + '事件占比',
            type: 'pie',
            radius: ['30%', '70%'],
            selectedMode: 'single',
            selectedOffset: 8,
            top: '18',
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 8,
              borderColor: '#fff',
              borderWidth: 2
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 16,
                fontWeight: 'bold'
              }
            },
            label: {
              show: true,
              formatter: '{b}:{c} {d}%',
            },
            labelLine: {
              show: true
            },
            data: this.eventRateData
          }
        ]
      }
      let _this = this;
      option && this.chartEvent.setOption(option);
      this.chartEvent.on('click', function (params) {
        _this.event_type = params.data.code;
        _this.event_type_name = '【' + params.data.name + '】';
        _this.loadProblemData();
      });
    },
    runProblem() {
      this.chartProblem = this.chartProblem || this.$echarts.init(this.$refs.problemTarget)
      let option = {
        title: {
          text: this.problem_source_name + this.event_type_name + '问题占比',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        /*legend: {
          top: '5%',
          left: 'center',
        },*/
        series: [
          {
            name: this.problem_source_name + this.event_type_name + '问题占比',
            type: 'pie',
            radius: ['30%', '70%'],
            selectedMode: 'single',
            selectedOffset: 8,
            top: '18',
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 8,
              borderColor: '#fff',
              borderWidth: 2
            },

            emphasis: {
              label: {
                show: true,
                fontSize: 16,
                fontWeight: 'bold'
              }
            },
            label: {
              show: true,
              formatter: '{b}:{c} {d}%',
            },
            labelLine: {
              show: true
            },
            data: this.problemRateData
          }
        ]
      }
      option && this.chartProblem.setOption(option);
    },
    runProblemNum() {
      this.chartProblemNumTarget = this.chartProblemNumTarget || this.$echarts.init(this.$refs.problemNumTarget)
      let option = {
        // color: ['#D32F2F', '#FBC02D', '#388E3C', '#1976D2'],
        color: ['#1976D2', '#388E3C', '#FBC02D', '#D32F2F'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {right: '5%', data: ['A', 'B', 'C', 'D']},
        title: {
          text: this.problemNumTypeName + '问题严重度数量统计',
          /*subtext:'问题总数：'+this.problemCountNum,*/

          left: 'center'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',

          containLabel: true
        },
        toolbox: {
          show: false,
          right: '3%',
          feature: {
            magicType: {
              type: ["line", "bar"]
            },
          }
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: false
            },

            axisLabel: {    //重点在这一块，其余可以忽略
              interval: 0,   //这个一定要有，别忘记了
              rotate: this.rotate,
              textStyle: {
                fontSize: 10
              }
            },
            data: this.nameList
          },
        ],
        dataZoom: [
          {
            show: this.showDataZoom,
            realtime: true,
            start: 0,
            end: 100,
            xAxisIndex: [0, 1]
          },
          {
            type: 'inside',
            realtime: true,
            start: 0,
            end: 100,
            xAxisIndex: [0, 1]
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '数量',
            axisLabel: {
              formatter: '{value} 个'
            }
          },
        ],
        series: this.seriesList.sort().reverse() // 数据倒序
      }
      let _this = this;
      option && this.chartProblemNumTarget.setOption(option);
      this.chartProblemNumTarget.on('click', function (params) {
        console.log(params);
        _this.clickBarShowProblemInfo(params);
      });
    },
    clickBarShowProblemInfo(params) {
      let name = params.name;
      let seriesName = params.seriesName;
      if (this.selectType == 'VALUE_POINT') {
        let code = '';
        let entryList = app.utils.getEntrys('VALVE_POINT_TIME');

        entryList.forEach((item) => {
          if (item.name == name) {
            code = item.code;
          }
        })
        this.$emit('toPage', 'va2d3f193314a27ab528d0e5c08', {
          valve_point_time: code,
          if_hidden: this.if_hidden,
          btime: this.btime,
          etime: this.etime
        })
      } else if (this.selectType == 'DEPARTMENT') {
        this.$emit('toPage', 'va2d3f193314a27ab528d0e5c08', {
          charge_person_dept: name,
          if_hidden: this.if_hidden,
          btime: this.btime,
          etime: this.etime
        })
      } else if (this.selectType == 'MONTH') {
        this.$emit('toPage', 'va2d3f193314a27ab528d0e5c08', {happen_month: "'" + name + "'", if_hidden: this.if_hidden})
      } else if (this.selectType == 'DAY') {
        this.$emit('toPage', 'va2d3f193314a27ab528d0e5c08', {problem_happen_date: name, if_hidden: this.if_hidden})
      } else if (this.selectType == 'PRODUCT') {
        this.$emit('toPage', 'va2d3f193314a27ab528d0e5c08', {
          product_name: name,
          if_hidden: this.if_hidden,
          btime: this.btime,
          etime: this.etime
        })
      }

    },

    loadProblemNumType(type, problemNumTypeName) {
      this.problemNumTypeName = problemNumTypeName;
      this.selectType = type;
      if (type == 'VALUE_POINT') {
        this.currentSql = this.valuePointSql;
      } else if (type == 'DEPARTMENT') {
        this.currentSql = this.departmentSql;
      } else if (type == 'MONTH') {
        this.currentSql = this.monthSql;
      } else if (type == 'DAY') {
        this.currentSql = this.daySql;
      } else if (type == 'PRODUCT') {
        this.currentSql = this.productSql;
      }
      /*else if(type == 'SEVERITY'){
        this.currentSql = this.severitySql;
      }*/
      this.loadProblemNumData();

    },
    loadProblemNumData() {
      let _this = this;
      this.nameList = [];
      this.seriesList = [];
      //问题数量统计
      let params = {"SQL": this.currentSql};
      app.utils.ajaxRequest({
        hideMsg: true,
        hideMask: true,
        url: app.path().dispose + "?functionCode=QMS_PROBLEM_NUM_REPORT",
        params: {
          "queryCondition[if_hidden]": _this.if_hidden,
          "queryCondition[year_data]": _this.year,
          "queryCondition[month_data]": _this.year_month,
          "queryCondition[btime]": _this.btime,
          "queryCondition[etime]": _this.etime,
          "queryCondition[engine_plant_code]": _this.plantCode.value,
          functionParam: JSON.stringify(params)
        },
        callBack(res) {
          if (res.success && res.rows.length > 0) {
            console.log(res.rows);
            let dataList = res.rows;
            if (dataList.length > 15) {
              _this.showDataZoom = true;
              _this.rotate = 10;
            } else {
              _this.showDataZoom = false;
              _this.rotate = 0
            }
            let aData = [];
            let bData = [];
            let cData = [];
            let dData = [];
            let nameList = [];
            dataList.forEach((item) => {
              item.name = app.utils.getEntryValue("VALVE_POINT_TIME", item.name)
              nameList.push(item.name);
              aData.push(item.a);
              bData.push(item.b);
              cData.push(item.c);
              dData.push(item.d);
            })
            let rawData = [aData, bData, cData, dData];
            const seriesList = ['A', 'B', 'C', 'D',].map((name, sid) => {
              return {
                name,
                type: 'bar',
                stack: 'total',
                barMaxWidth: 60,
                barMinWidth: 40,
                emphasis: {
                  focus: 'series'
                },
                itemStyle: {
                  normal: {
                    barBorderRadius: [3, 3, 3, 3],
                    label: {
                      show: true,
                      formatter: (params) => params.value == 0 ? '' : params.value
                    },
                  }
                },
                data: rawData[sid]
              };
            });
            _this.nameList = nameList;
            _this.seriesList = seriesList;
          }
          _this.runProblemNum();
        },
      })
    },
    loadSourceData() {
      let _this = this
      _this.sourceRateData = [];
      app.utils.ajaxRequest({
        hideMsg: true,
        hideMask: true,
        url: app.path().dispose + "?functionCode=QMS_QUALITY_PROBLEM_IN_OUT_RATE",
        params: {
          "queryCondition[if_hidden]": _this.if_hidden,
          "queryCondition[btime]": _this.btime,
          "queryCondition[etime]": _this.etime
        },
        callBack(res) {
          if (res.success && res.rows.length > 0) {
            let dataList = res.rows;
            dataList.forEach((item) => {
              item.code = item.name;
              item.name = app.utils.getEntryValue("QUALITY_PROBLEM_SOURCE", item.name)
            })
            _this.sourceRateData = dataList;

          }
          _this.runSource()
        },
      })
    },
    loadEventData() {
      let _this = this;
      _this.eventRateData = [];
      app.utils.ajaxRequest({
        hideMsg: true,
        hideMask: true,
        url: app.path().dispose + "?functionCode=QMS_QUALITY_EVENT_TYPE_RATE",
        params: {
          "queryCondition[if_hidden]": _this.if_hidden,
          "queryCondition[btime]": _this.btime,
          "queryCondition[etime]": _this.etime,
          "queryCondition[problem_source]": _this.problem_source
        },
        callBack(res) {
          if (res.success && res.rows.length > 0) {
            let dataList = res.rows;
            dataList.forEach((item) => {
              item.code = item.name;
              item.name = app.utils.getEntryValue("QUALITY_EVENT_TYPE", item.name)
            })
            _this.eventRateData = dataList;

          }
          _this.runEvent()
        },
      })
    },
    loadProblemData() {
      let _this = this
      _this.problemRateData = [];
      app.utils.ajaxRequest({
        hideMsg: true,
        hideMask: true,
        url: app.path().dispose + "?functionCode=QMS_QUALITY_PROBLEM_TYPE_RATIO_REPORT",
        params: {
          "queryCondition[if_hidden]": _this.if_hidden,
          "queryCondition[problem_source]": _this.problem_source,
          "queryCondition[btime]": _this.btime,
          "queryCondition[etime]": _this.etime,
          "queryCondition[event_type]": _this.event_type
        },
        callBack(res) {
          if (res.success && res.rows.length > 0) {
            let dataList = res.rows;
            dataList.forEach((item) => {
              item.code = item.name;
              item.name = app.utils.getEntryValue("QUALITY_PROBLEM_TYPE", item.name)
            })
            _this.problemRateData = dataList;
          }
          _this.runProblem()
        },
      })
    },
    loadTopNum() {
      let _this = this;
      app.utils.ajaxRequest({
        hideMsg: true,
        hideMask: true,
        url: app.path().dispose + "?functionCode=QMS_HOME_TOP_REPORT_SHOW",
        params: {
          "queryCondition[if_hidden]": _this.if_hidden,
          "queryCondition[btime]": _this.btime,
          "queryCondition[etime]": _this.etime,
          "queryCondition[user_id]": app.user().user.id
        },
        callBack(res) {
          if (res.success && res.rows.length > 0) {
            let data = res.rows[0];
            _this.closeRate = data.close_rate;
            _this.warningRate = data.warning_rate;
            _this.eventAuditNum = data.event_audit_num;
            _this.problemCountNum = data.problem_count_num;
          }
        },
      })
    },
    loadTaskNum() {
      let _this = this;
      app.utils.ajaxRequest({
        hideMsg: true,
        hideMask: true,
        url: app.path().dispose + "?functionCode=QMS_RUN_TASK_LIST",
        params: {"rows": 10, "offset": 0, "limit": 5, "page": 1},
        callBack(res) {
          console.log(res);
          if (res.success) {
            _this.waitToDoneNum = res.total;
          }
        },
      })
    },
    loadAllData() {
      this.loadTopNum();
      this.loadTaskNum();
    //   this.loadProblemNumData();
      this.loadProblemNumType('MONTH','【年度】');
      this.loadSourceData();
      this.loadEventData();
      this.loadProblemData();
    },
    loadPlantData() {
      let _this = this;
      _this.plantItems = [];
      app.utils.ajaxRequest({
        hideMsg: true,
        hideMask: true,
        url: app.path().dispose + "?functionCode=QMS_MAIN_ENGINE_PLANT_SELECT",
        params: {is_queryPage: false},
        callBack(res) {
          if (res.success && res.rows.length > 0) {
            let dataList = res.rows;
            let plantList = [];
            dataList.forEach((item) => {
              let map = {};
              map.text = item.main_engine_plant_name;
              map.value = item.main_engine_plant_code;
              map.id = item.id;
              plantList.push(map);
            })
            _this.plantItems = plantList;
          }
        },
      })
    },
  },
  created() {
    const year = new Date().getFullYear()
    const endYear = year;
    const diff = year - 2024;
    for (let i = year - 4 - diff; i <= endYear; i++) {
      this.years.push(i)
    }
  },
  computed: {
    warn_color: function () {
      if (this.warningRate > 75) {
        return 'red';
      } else if (this.warningRate > 50) {
        return 'yellow';
      } else if (this.warningRate > 25) {
        return 'blue';
      } else {
        return '#3C634E';
      }
    },
    current_year: function () {
      return "【" + this.year + '年】';
    },
    year_month: function () {
      return this.year + '-' + String(this.month).padStart(2, '0');
    },
    current_month: function () {
      if (this.selectType == "DAY") {
        return "【" + this.month + '月】';
      } else {
        return "";
      }
    },
    btime: function () {
      if (this.dates != '' && this.dates.length > 0) {
        return this.dates[0];
      } else {
        return "";
      }
    },
    etime: function () {
      if (this.dates != '' && this.dates.length > 0) {
        return this.dates[1];
      } else {
        return "";
      }
    },
  },
  watch: {
    month(newValue, oldValue) {
      if (newValue != undefined && newValue != '') {
        this.loadAllData();
      }
    },
    year(newValue) {
      if (newValue != undefined && newValue != '') {
        this.loadAllData();
      }
    },
    dates(newValue, oldValue) {
      this.loadAllData();

    },
    plantCode(newValue, oldValue) {
      this.loadAllData();

    },
  },
  mounted() {
    this.loadPlantData();
    this.loadAllData();
    let _this = this;
    this.intervalId = setInterval(function () {
      _this.loadAllData();
    }, 1000 * 60);
    window.onresize=()=>{
      this.chartSource.resize();
      this.chartEvent.resize();
      this.chartProblem.resize();
      this.chartProblemNumTarget.resize();
    }
  },
  beforeDestroy() {
    clearInterval(this.intervalId);
  }

}
</script>
